<template>
  <el-descriptions
    :title="t('ustcstudent.view.tabPersonal.personal')"
    :column="3"
    border
    label-width="150"
  >
    <el-descriptions-item :label="t('ustcStudentInfoPersonal.fields.wechat')" width="280">
      <EditInput
        v-model="model.wechat"
        :placeholder="t('common.inputTextPlaceholder') + t('ustcStudentInfoPersonal.fields.wechat')"
        disabled
      />
    </el-descriptions-item>
    <el-descriptions-item :label="t('ustcStudentInfoPersonal.fields.qq')" width="280">
      <EditInput
        v-model="model.qq"
        :placeholder="t('common.inputTextPlaceholder') + t('ustcStudentInfoPersonal.fields.qq')"
        disabled
      />
    </el-descriptions-item>
    <el-descriptions-item :label="t('ustcStudentInfoPersonal.fields.homePhone')" width="280">
      <EditInput
        v-model="model.homePhone"
        :placeholder="
          t('common.inputTextPlaceholder') + t('ustcStudentInfoPersonal.fields.homePhone')
        "
        disabled
      />
    </el-descriptions-item>
    <el-descriptions-item :label="t('ustcStudentInfoPersonal.fields.homeZipcode')" width="280">
      <EditInput
        v-model="model.homeZipcode"
        :placeholder="
          t('common.inputTextPlaceholder') + t('ustcStudentInfoPersonal.fields.homeZipcode')
        "
        disabled
      />
    </el-descriptions-item>
    <el-descriptions-item
      :span="2"
      :label="t('ustcStudentInfoPersonal.fields.homeAddress')"
      width="280"
    >
      <EditInput
        v-model="model.homeAddress"
        :placeholder="
          t('common.inputTextPlaceholder') + t('ustcStudentInfoPersonal.fields.homeAddress')
        "
        disabled
      />
    </el-descriptions-item>
    <el-descriptions-item :label="t('ustcStudentInfoPersonal.fields.emergencyContact')" width="280">
      <EditInput
        v-model="model.emergencyContact"
        :placeholder="
          t('common.inputTextPlaceholder') + t('ustcStudentInfoPersonal.fields.emergencyContact')
        "
        disabled
      />
    </el-descriptions-item>
    <el-descriptions-item
      :span="2"
      :label="t('ustcStudentInfoPersonal.fields.emergencyPhone')"
      width="280"
    >
      <EditInput
        v-model="model.emergencyPhone"
        :placeholder="
          t('common.inputTextPlaceholder') + t('ustcStudentInfoPersonal.fields.emergencyPhone')
        "
        disabled
      />
    </el-descriptions-item>
    <el-descriptions-item
      :span="3"
      :label="t('ustcStudentInfoPersonal.fields.emergencyAddress')"
      width="280"
    >
      <EditInput
        v-model="model.emergencyAddress"
        :placeholder="
          t('common.inputTextPlaceholder') + t('ustcStudentInfoPersonal.fields.emergencyAddress')
        "
        disabled
      />
    </el-descriptions-item>
    <el-descriptions-item
      :span="3"
      :label="t('ustcStudentInfoPersonal.fields.currentUnit')"
      width="280"
    >
      <EditInput
        v-model="model.currentUnit"
        :placeholder="
          t('common.inputTextPlaceholder') + t('ustcStudentInfoPersonal.fields.currentUnit')
        "
        disabled
      />
    </el-descriptions-item>
    <el-descriptions-item
      :span="3"
      :label="t('ustcStudentInfoPersonal.fields.currentAddress')"
      width="280"
    >
      <EditInput
        v-model="model.currentAddress"
        :placeholder="
          t('common.inputTextPlaceholder') + t('ustcStudentInfoPersonal.fields.currentAddress')
        "
        disabled
      />
    </el-descriptions-item>
  </el-descriptions>

  <div class="tab-title">
    {{ t('ustcstudent.view.tabPersonal.family') }}
  </div>

  <vxe-table
    ref="tableRef"
    :data="model.familyCrew"
    :row-config="{ useKey: true, drag: true }"
    :column-config="{ useKey: true, resizable: true }"
    :size="vxeTableSize"
    stripe
    @row-dragend="rowDragendEvent"
    :checkbox-config="{ highlight: true }"
  >
    <vxe-column v-if="editMode" type="checkbox" align="center" width="50" />
    <vxe-column type="seq" align="center" width="70" :drag-sort="editMode && false" />
    <vxe-column
      :title="t('ustcStudentInfoFamily.fields.name')"
      field="name"
      align="center"
      show-header-overflow
      show-overflow
      min-width="100"
    >
      <template #default="scope">
        <EditInput v-model="scope.row.name" :show-copy="false" text-align="center" disabled />
      </template>
    </vxe-column>
    <vxe-column
      :title="t('ustcStudentInfoFamily.fields.gender')"
      field="gender"
      align="center"
      show-header-overflow
      show-overflow
      min-width="100"
    >
      <template #default="scope">
        <EditInput v-model="scope.row.gender" :show-copy="false" text-align="center" disabled />
      </template>
    </vxe-column>
    <vxe-column
      :title="t('ustcStudentInfoFamily.fields.relationship')"
      field="relationship"
      align="center"
      show-header-overflow
      show-overflow
      min-width="100"
    >
      <template #default="scope">
        <EditInput
          v-model="scope.row.relationship"
          :show-copy="false"
          text-align="center"
          disabled
        />
      </template>
    </vxe-column>
    <vxe-column
      :title="t('ustcStudentInfoFamily.fields.unitName')"
      field="unitName"
      align="center"
      show-header-overflow
      show-overflow
      min-width="100"
    >
      <template #default="scope">
        <EditInput v-model="scope.row.unitName" :show-copy="false" text-align="center" disabled />
      </template>
    </vxe-column>
    <vxe-column
      :title="t('ustcStudentInfoFamily.fields.career')"
      field="career"
      align="center"
      show-header-overflow
      show-overflow
      min-width="100"
    >
      <template #default="scope">
        <EditInput v-model="scope.row.career" :show-copy="false" text-align="center" disabled />
      </template>
    </vxe-column>
    <vxe-column
      :title="t('ustcStudentInfoFamily.fields.position')"
      field="position"
      align="center"
      show-header-overflow
      show-overflow
      min-width="100"
    >
      <template #default="scope">
        <EditInput v-model="scope.row.position" :show-copy="false" text-align="center" disabled />
      </template>
    </vxe-column>
    <vxe-column
      :title="t('ustcStudentInfoFamily.fields.telephone')"
      field="telephone"
      align="center"
      show-header-overflow
      show-overflow
      min-width="100"
    >
      <template #default="scope">
        <EditInput v-model="scope.row.telephone" :show-copy="false" text-align="center" disabled />
      </template>
    </vxe-column>
    <vxe-column
      :title="t('ustcStudentInfoFamily.fields.address')"
      field="address"
      align="center"
      show-header-overflow
      show-overflow
      min-width="100"
    >
      <template #default="scope">
        <EditInput v-model="scope.row.address" :show-copy="false" text-align="center" disabled />
      </template>
    </vxe-column>
    <vxe-column
      :title="t('ustcStudentInfoFamily.fields.politicalStatus')"
      field="politicalStatus"
      align="center"
      show-header-overflow
      show-overflow
      min-width="100"
    >
      <template #default="scope">
        <EditInput
          v-model="scope.row.politicalStatus"
          :show-copy="false"
          text-align="center"
          disabled
        />
      </template>
    </vxe-column>
    <vxe-column
      :title="t('ustcStudentInfoFamily.fields.identityType')"
      field="identityType"
      align="center"
      show-header-overflow
      show-overflow
      min-width="100"
    >
      <template #default="scope">
        <EditInput
          v-model="scope.row.identityType"
          :show-copy="false"
          text-align="center"
          disabled
        />
      </template>
    </vxe-column>
    <vxe-column
      :title="t('ustcStudentInfoFamily.fields.identityNumber')"
      field="identityNumber"
      align="center"
      show-header-overflow
      show-overflow
      min-width="100"
    >
      <template #default="scope">
        <EditInput
          v-model="scope.row.identityNumber"
          :show-copy="false"
          text-align="center"
          disabled
        />
      </template>
    </vxe-column>
    <vxe-column
      :title="t('ustcStudentInfoFamily.fields.guardian')"
      field="guardian"
      align="center"
      show-header-overflow
      show-overflow
      min-width="100"
    >
      <template #default="scope">
        <span v-if="scope.row.guardian">是</span>
        <span v-else>否</span>
      </template>
    </vxe-column>
  </vxe-table>
</template>

<script setup lang="ts">
import EditInput from '@/components/EditViewInput/EditInput.vue'
import EditDict from '@/components/EditViewInput/EditDict.vue'
import EditDate from '@/components/EditViewInput/EditDate.vue'
import { DICT_TYPE } from '@/utils/dict'
import { StudentInfoPersonalViewVO } from '@/types/ustcstudent'
import { useAppStore } from '@/store/modules/app'
import { UstcStudentInfoFamilyVO } from '@/api/core/ustcstudentinfofamily'
import type { VxeTableInstance, VxeTableEvents } from 'vxe-table'

const { t } = useI18n()

const appStore = useAppStore()
const vxeTableSize = computed(() => appStore.getCurrentSizeVxe)

const editMode = inject('editMode', false)

const model = defineModel<StudentInfoPersonalViewVO>({ required: true })

provide('editMode', false)

const tableRef = ref<VxeTableInstance<UstcStudentInfoFamilyVO>>()

const rowDragendEvent: VxeTableEvents.RowDragend = () => {
  const $table = tableRef.value
  if ($table) {
    const { visibleData } = $table.getTableData()
    model.value.familyCrew = visibleData
  }
}

const handleAddRow = () => {
  model.value.familyCrew.push({})
}
const handleDeleteRow = () => {
  const $table = tableRef.value
  if ($table) {
    const selectRecords = $table.getCheckboxRecords()
    if (selectRecords.length === 0) {
      return
    }

    const xRows = selectRecords.map((item) => item._X_ROW_KEY)
    // 根据_X_ROW_KEY过滤数组
    model.value.familyCrew = model.value.familyCrew.filter(
      (item) => !xRows.includes(item._X_ROW_KEY)
    )
  }
}
</script>

<style scoped lang="scss">
.tab-title {
  color: var(--el-text-color-primary);
  font-size: 16px;
  font-weight: bold;
  margin: 16px 0;

  display: flex;
  align-items: center;

  .btn-group {
    margin-left: 20px;
  }
}
</style>
